<!--
 * @Author: zll
 * @Date: 2024-05-21 20:02:39
 * @LastEditors: zll
 * @LastEditTime: 2024-05-28 16:56:01
 * @Description: file content
 * @FilePath: \erp-app\src\components\BillStatus.vue
-->
<template>
  <view class="f1" :style="boxW">
    <view class="r1" :style="borderColor"></view>
    <view class="r2" :style="borderColor"></view>
    <view class="w2" :style="{ borderColor: color, color: color }">
      {{ title }}
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '已通过',
  },
  color: {
    type: String,
    default: '#09ad9c',
  },
  size: {
    type: String,
    default: '120rpx',
  },
});

const borderColor = computed(() => {
  return `border-color: ${props.color};`;
});
const fontColor = computed(() => {
  return `color: ${props.color};`;
});
const boxW = computed(() => {
  return `width: ${props.size};height: ${props.size}`;
});
</script>
<style scoped lang="scss">
.f1 {
  overflow: hidden;
  // width: 120rpx;
  // height: 120rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.r1 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 4rpx solid;
  border-radius: 100%;
  clip-path: polygon(80% 0%, 2% 100%, 0% -3600%, 17% 100%, 89% 96%);
}
.r2 {
  top: 20rpx;
  left: 20rpx;
  right: 20rpx;
  bottom: 20rpx;
  position: absolute;
  border: 2rpx solid;
  border-radius: 100%;
  clip-path: polygon(60% 100%, 0% 100%, 0 -3600%, 10% 10%);
}
.w2 {
  width: calc(100% - 40rpx);
  height: calc(100% - 40rpx);
  position: absolute;
  top: 13%;
  left: 23%;
  font-size: 24rpx;
  transform: rotate(57deg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
// .w1 {
//   position: absolute;
//   top: -44rpx;
//   right: -44rpx;
//   line-height: 100px;
//   text-align: center;
//   width: 100px;
//   height: 100px;
//   border: 2px solid;
//   border-radius: 50%;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
// .w2 {
//   line-height: 80px;
//   text-align: center;
//   width: 80px;
//   height: 80px;
//   border: 1px solid;
//   border-radius: 50%;
//   font-size: 16px;
//   transform: rotate(45deg);
//   font-weight: 400;
// }
</style>
